	
var vue = new Vue({
  el: '#pageDiv',
  data :{
	  tableData : [],
	  //角色菜单穿梭框
	  menuLData : [],
	  menuRData : [],
	  //角色作业穿梭框
	  jobLData : [],
	  jobRData : [],
	  loading: false,
	  currentPage : 1,
	  pagesize : 10,
	  totalSize : 10,
	  //url
	  toListUrl:'/userRole/toList',
	  queryUrl:COMMON_URL.URL+'userRole/list',
	  editUrl:COMMON_URL.URL+'userRole/edit',
	  saveUrl:COMMON_URL.URL+'userRole/add',
	  deleteUrl: COMMON_URL.URL+'userRole/delete',
	  getPermissionByRoleIdUrl : COMMON_URL.URL+'userRole/getPermissionByRoleId',
	  saveRolePermissoinUrl :  COMMON_URL.URL+'userRole/saveRoleAndPeimission',
	  deleteRolePermissoinUrl :  COMMON_URL.URL+'userRole/deleteRoleAndPermissionByRoleId',
	  getJobByRoleIdUrl : COMMON_URL.URL+'userRole/getJobByRoleId',
	  saveRoleJobUrl :  COMMON_URL.URL+'userRole/saveRoleAndJob',
	  deleteRoleJobUrl : COMMON_URL.URL+'userRole/deleteRoleAndJobByRoleId',
	  visible2: false,
	  dialogEdit:false,
	  dialogAdd:false,
	  dialogMenu:false,
	  dialogJob:false,
	  dialogTitle:'',
	  roleId:"",
	  role:{
		  id:'',
		  roleName : '',
		  roleDesc : ''
	  },
	  roleAdd:{
		  roleName : '',
		  roleDesc : ''
	  },
	  //form校验规则
	  rules:{
		  roleName:[
            { required: true, message: '请输入角色名称', trigger: 'blur' }
          ],
          roleDesc:[
	        { required: true, message: '请输入角色描述', trigger: 'blur' }
	      ]
	  }
  },
  methods:{
	  //查询数据
	  loadData(pageNum,pageSize){
		  var tables = this.tableData ;
		  $.ajax({
				url : this.queryUrl,
				dataType : 'json',
				type : 'get',
				data : {pageNum:pageNum,pageSize:pageSize},
				success : function(data){
					if(data.ok){
						var value = data.data.list;
						vue.tableData = value;
						vue.currentPage = data.data.currentPage;
						vue.totalSize = data.data.allCounts;
					}
				}
		  });
	  },
	  //分页
	  handleSizeChange(val){
		this.pagesize = val;
		this.loadData(this.currentPage,this.pagesize);
	  },
	  //分页
	  handleCurrentChange(val){
		this.currentPage = val;
		this.loadData(this.currentPage,this.pagesize);
	  },
	  //跳转到新页面
	  openTabById(url,val){
		  $.get(url+val,function(data){
				$('#mainApp').html(data);
		  });
	  },
      //打开成功提示
      successMsg() {
	      this.$message({
	        showClose: true,
	        message: '操作成功',
	        type: 'success'
	      });
	  },
	  //打开成功提示
      errorMsg() {
	      this.$message({
	        showClose: true,
	        message: '操作失败',
	        type: 'error'
	      });
	  },
	  openAddDialog(){
		  this.dialogAdd = true;  
	  },
	  //关闭弹窗
      closeDialog(){
    	  this.dialogEdit = false;
    	  this.dialogAdd = false;
    	  this.dialogMenu = false;
    	  this.dialogJob = false;
    	  vue.loadData(vue.currentPage, vue.pagesize);
    	  this.roleAdd.roleName = '';
    	  this.roleAdd.roleDesc ='';
      },
      updatePermission(id){
    	  this.dialogMenu =true;
	      //加载穿梭框数据
	      this.loadTranferDataForPermission(id);
      },
      //穿梭框查询搜索方法
	  filterMethodForPermission(query, item) {
			//这里可以自定义查询方法
	        return item.label.indexOf(query) > -1;
	  },
	  //加载穿梭框数据
      loadTranferDataForPermission(id){
			vue.menuLData = [];
	    	vue.menuRData = [];
	    	$.ajax({
	    		url : vue.getPermissionByRoleIdUrl,
	    		dataType : 'json',
	    		data : {id:id},
	    		type : 'get',
	    		async:false,
	    		success : function(data){
	    			if(data.ok){
	    				var value = data.attrs;
	    				//给roleId赋值
	    				vue.roleId = value.roleId;
	    				
	    				var leftData = value.left;
	    				if(leftData!=null && leftData.length>0){
	    					for(var i=0;i<leftData.length;i++){
		    					var val = leftData[i];
		    					vue.menuLData.push({
		    						label: val.desc,
		    						key: val.id
		    					});
		    				}
	    				}
	    				
	    				var rightData = value.right;
	    				if(rightData != null && rightData.length>0){
	    					for(var i=0;i<rightData.length;i++){
		    					var val = rightData[i];
		    					vue.menuRData.push(val.id);
		    				}
	    				}
	    			}
	    		}
	       });
	  },
	  addPermission(){
		  var roleId = vue.roleId;
		  var permissionList = vue.menuRData;
		  var mesRoleAndPermissions = [];
	    	
    	  for(var i=0;i<permissionList.length;i++){
    		  var mesRoleAndPermission = {
    	    	  roleId : roleId,
    	    	  permissionId : permissionList[i]
    	      };
    		  mesRoleAndPermissions.push(mesRoleAndPermission);
    	  };
    	  if(mesRoleAndPermissions!=""){
    		  $.ajax({
  	    		url : vue.saveRolePermissoinUrl,
  	    		dataType : 'json',
  	    		type : 'post',
  	    		contentType : 'application/json',
  	    		data : JSON.stringify(mesRoleAndPermissions),
  	    		success : function(data){
  	    			if(data.ok){
  	    				vue.closeDialog();
  	    				vue.successMsg();
  	    			}else{
  	    				vue.errorMsg();
  	    			}
  	    		}
    		  });
    	  }else{
    		  $.ajax({
	  	    	  url : vue.deleteRolePermissoinUrl,
	  	    	  dataType : 'json',
	  	    	  type : 'get',
	  	    	  data : {id:roleId},
	  	    	  success : function(data){
	  	    		  if(data.ok){
	  	    			  vue.closeDialog();
	  	    			  vue.successMsg();
	  	    		  }else{
	  	    		      vue.errorMsg();
	  	    		  }
	  	    	  }
  	          });
    	  }
    	 
    	  
	  },
	  
	  updateJob(id){
    	  this.dialogJob =true;
	      //加载穿梭框数据
	      this.loadTranferDataForJob(id);
      },
      //穿梭框查询搜索方法
      filterMethodForJob(query, item) {
			//这里可以自定义查询方法
	        return item.label.indexOf(query) > -1;
	  },
	  //加载穿梭框数据
      loadTranferDataForJob(id){
			vue.jobLData = [];
	    	vue.jobRData = [];
	    	$.ajax({
	    		url : vue.getJobByRoleIdUrl,
	    		dataType : 'json',
	    		data : {id:id},
	    		type : 'get',
	    		async:false,
	    		success : function(data){
	    			if(data.ok){
	    				var value = data.attrs;
	    				//给roleId赋值
	    				vue.roleId = value.roleId;
	    				
	    				var leftData = value.left;
	    				if(leftData!=null && leftData.length>0){
	    					for(var i=0;i<leftData.length;i++){
		    					var val = leftData[i];
		    					vue.jobLData.push({
		    						label: val.jobDesc,
		    						key: val.id
		    					});
		    				}
	    				}
	    				
	    				var rightData = value.right;
	    				if(rightData != null && rightData.length>0){
	    					for(var i=0;i<rightData.length;i++){
		    					var val = rightData[i];
		    					vue.jobRData.push(val.id);
		    				}
	    				}
	    			}
	    		}
	       });
	  },
	  addJob(){
		  var roleId = vue.roleId;
		  var jobList = vue.jobRData;
		  var mesRoleAndjobs = [];
	    	
    	  for(var i=0;i<jobList.length;i++){
    		  var mesRoleAndjob = {
    	    	  roleId : roleId,
    	    	  jobId : jobList[i]
    	      };
    		  mesRoleAndjobs.push(mesRoleAndjob);
    	  };
    	  if(mesRoleAndjobs!=""){
    		  $.ajax({
	  	    	  url : vue.saveRoleJobUrl,
	  	    	  dataType : 'json',
	  	    	  type : 'post',
	  	    	  contentType : 'application/json',
	  	    	  data : JSON.stringify(mesRoleAndjobs),
	  	    	  success : function(data){
	  	    		  if(data.ok){
	  	    			  vue.closeDialog();
	  	    			  vue.successMsg();
	  	    		  }else{
	  	    		      vue.errorMsg();
	  	    		  }
	  	    	  }
  	          });
    	  }else{
    		  $.ajax({
	  	    	  url : vue.deleteRoleJobUrl,
	  	    	  dataType : 'json',
	  	    	  type : 'get',
	  	    	  data : {id:roleId},
	  	    	  success : function(data){
	  	    		  if(data.ok){
	  	    			  vue.closeDialog();
	  	    			  vue.successMsg();
	  	    		  }else{
	  	    		      vue.errorMsg();
	  	    		  }
	  	    	  }
  	          });
    	  }
    	  
    	  
	  },
	  
      //保存看板配置
      addForm(formName){
    	  this.$refs[formName].validate((valid) => {
              if (valid) {
                $.ajax({
    				url : this.saveUrl,
    				dataType : 'json',
    				type : 'post',
    				contentType: "application/json",
    	    		data : JSON.stringify(this.roleAdd),
    				success : function(data){
    					if(data.ok){
    						vue.dialogAdd = false;
    						vue.successMsg();
    			      	  	//刷新页面数据
    						vue.loadData(vue.currentPage, vue.pagesize);
    					}else{
    						vue.errorMsg();
    						vue.loadData(vue.currentPage, vue.pagesize);
    					}
    				}
                });
              } else {
                return false;
              }
          });
      },
	  //获取当前行的值
      getRoleData(row){
		  //打开修改弹窗
    	  this.dialogEdit =true;
    	  vue.role = row;
    	  this.dialogTitle = "修改角色："+row.roleName;
      },
      //保存修改
      editForm(){
    	  $.ajax({
				url : this.editUrl,
				type : 'post',
				dataType : 'json',
				contentType: "application/json",
				data :JSON.stringify(this.role),
				async: false,
				success : function(data){
					if(data.ok){
						vue.successMsg();
						vue.dialogEdit =false;
				    	//刷新页面数据
						//vue.loadData(vue.currentPage, vue.pagesize);
					}else{
						vue.errorMsg();
						vue.loadData(vue.currentPage, vue.pagesize);
					}
				}
		  });
      },
      //删除看板配置
      deleteConfig(index,row,value){
		  const h = this.$createElement;
		  this.$msgbox({
			  title : "警告",
			  message : h('p', null, [
	            h('span', null, '你将要删除 '),
	            h('i', { style: 'color: teal' }, row.roleName),
	            h('span', null, ' 此操作将会一并删除 '),
	            h('i', { style: 'color: teal' }, "详细权限配置"),
	            h('span', null, ' ！请考虑好再操作！'),
	          ]),
	          showCancelButton: true,
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          beforeClose: (action, instance, done) => {
	              if (action === 'confirm') {
	                instance.confirmButtonLoading = true;
	                instance.confirmButtonText = '执行中...';
	        		$.ajax({
	        			type : 'get',
	        			dataType : 'json',
	        			data : {id : row.id},
	        			url : this.deleteUrl,
	        			success : function(data){
	        				if(data.ok){
	        					done();
	        					setTimeout(() => {
	                				instance.confirmButtonLoading = false;
	                			}, 300);
	        					//刷新页面数据
	        			        value.splice(index,1);
	        				}else{
	        					setTimeout(() => {
	                				instance.confirmButtonLoading = false;
	                			}, 300);
	    					}
	        			}
	        		});
	              }else{
	                done();
	              }
	          }
		  }).then(action => {
	          this.$message({
	        	  showClose: true,
	              type: 'success',
	              message: '操作成功'
	          });
	      });
	  }
   }
});
	

//载入数据
vue.loadData(vue.currentPage, vue.pagesize);

